<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}
</style>

<template>
<div class="salesSpecification">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加互换产品</a>
    </div>

    <form class="layui-form ">
        <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">

            <div class="layui-inline" style="width: 160px">
                <select name="groupcode" id="groupcode" lay-filter="groupcodes" placeholder="请选择" class="layui-form-select">
                    <option v-for="code in groupcodes" :value="code" :key="code">{{code}}</option>
                </select>
            </div>

            <div class="layui-inline" style="width: 160px">
                <select name="prodguid" id="prodguid" lay-filter="products" placeholder="请选择" class="layui-form-select">
                    <option v-for="pro in products" :value="pro.guid" :key="pro.guid">{{pro.productname}}</option>
                </select>
            </div>

            <div class="layui-inline" style="width: 160px">
                <select name="specguid" id="specguid" lay-filter="specs" placeholder="请选择" class="layui-form-select">
                    <option v-for="spec in specs" :value="spec.guid" :key="spec.guid">{{spec.name}}</option>
                </select>
            </div>
        </div>

    </form>

    <table class="layui-table layui-form">

        <thead>
            <tr>
                <th>分组编码</th>
                <th>产品名称</th>
                <th>规格名称</th>
                <th>状态</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="id9" v-for="(val, index) in interchangespecs" :key="index">
                <th>{{val.groupcode}}</th>
                <th>{{val.productname}}</th>
                <th>{{val.specname}}</th>
                <td><template v-if="val.status == 1">正常</template><template v-if="val.status == 0">禁用</template></td>
                <th>{{val.operatorname}}</th>
                <th>{{val.createtime}}</th>
                <th><a href="javascript:;" @click="del(val.guid)">删除</a></th>
            </tr>
        </tbody>
    </table>

    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
    <div style="height: 200px"></div>
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
export default {
    name: 'InterchangeSpec',
    components: {
        Pagination
    },
    data() {
        return {
            interchangespecs: [],
            currentPage: 1,
            totalPage: 0,
            codes: [],
            products: [],
            specs: []
        }
    },
    mounted() {
        let that = this;
        that.getPageData();
        that.getProducts();
        that.getCodeByGroup();
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            form.on('select(products)', function(data){
                console.log('111:',data);
                that.getSpecs(data.value)
                form.render('select');//select是固定写法 不是选择器
            });

        });

    },
    methods: {
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            postData.pageSize = 10;
            if (type != 'search') {
                postData.pageNo = that.currentPage;
            } else {
                postData.pageNo = 1;
            }

            $.ajax({
                url: '/sales/Interchangespec!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.msg == 'success') {
                        that.totalPage = res.info.pageCount;
                        that.interchangespecs = res.info.rows;
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('AddInterchangeSpec');
        },
        edit: function (id) {
            this.$parent.guids = id;
            this.$parent.switchPage('EditInterchangeSpec');
        },
        del: function (id) {
            let that = this;

            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Interchangespec!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        var result = res.info;
                        if (result != "fail") {
                            that.toast("删除成功");
                            that.getPageData();
                        } else {
                            console.log(result)
                            that.toast(res.errorMsg);
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            })
        },
        getCodeByGroup: function () {
            let that = this;
            this.$post('/sales/Interchangespec!getCodeByGroup.action')
                .then(response => {
                    let data = response.data;
                    if (data.msg == 'success') {
                        this.codes = data.result;
                    } else {
                        this.toast('获取分组编码失败');
                    }
                });
        },
        getProducts: function () {
            let that = this;
            this.$post('/sales/Sellform!findProductinfo.action')
                .then(response => {
                    let data = response.data;
                    if (data.status == 'true') {
                        this.products = data.result;
                    } else {
                        this.toast('获取产品数据失败');
                    }
                });
        },
        getSpecs: function (productid) {
            let that = this;
            this.axios({
                method: 'get',
                url: '/produce/Whinapply!getSpeByproduct.action',
                params: {productid: productid}
            }).then((response) => {
                if (response.data.msg == 'success') {
                    let data = response.data;
                    this.specs = data.specifications;
                } else {
                    this.toastError("获取规格数据失败");
                }

            });
        }
    }
}
</script>
